<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>轮播图</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        #div1 {
            width: 850px;
            height: 500px;
            margin: 50px auto;
            overflow: hidden;
            position: relative;
        }
        
        #div1 ul {
            position: absolute;
            left: 0;
            top: 0;
        }
        
        #div1 ul li {
            height: 500px;
            float: left;
        }
        
        #div1 ol {
            position: absolute;
            right: 10%;
            bottom: 10px;
            z-index: 6
        }
        
        #div1 ol li {
            width: 20px;
            height: 20px;
            background: #fff;
            margin-left: 5px;
            float: left;
            line-height: 20px;
            text-align: center;
        }
        
        #div1 ol li.ac {
            background: red;
            color: #fff;
        }
        
        #div1>a {
            text-decoration: none;
            position: absolute;
            top: 50%;
            margin-top: -10px;
            height: 40px;
            line-height: 32px;
            text-align: center;
            width: 40px;
            font-size: 40px;
            vertical-align: middle;
            color: #fff;
            background: rgba(0, 0, 0, 0.5);
            z-index: 6;
        }
        
        #goPrev {
            left: 0;
        }
        
        #goNext {
            right: 0;
        }
        
        img {
            width: 850px;
            height: 500px;
        }
    </style>
    <script>
        window.onload = function() {
            var div = document.querySelector('#div1'),
                ul = div.querySelector('ul'),
                imgs = ul.querySelectorAll('li'),
                ol = div.querySelector('ol'),
                goPrev = document.querySelector('#goPrev'),
                goNext = document.querySelector('#goNext'),
                btns = [] // 所有按钮

            // 记录运动状态，默认false代表静止
            var isMove = false;
            // 自动轮播的定时器
            var timer = null;
            // 保存当前图片的下标
            var index = 0;
            // 保存上一张图片的下标
            var lastIndex = 0;
            // 获取本来图片的张数
            var len = imgs.length;
            // 获取图片宽度
            var width = imgs[0].offsetWidth;

            // 在ul里追加一个第0张图
            ul.appendChild(imgs[0].cloneNode(true));

            // 计算ul的width
            ul.style.width = (len + 1) * width + 'px'

            // 根据图片张数创建按钮并且绑定事件完成按钮切换
            for (let i = 0; i < len; i++) {
                var li = document.createElement('li')
                li.innerHTML = i + 1;
                if (i === 0) li.className = 'ac'
                ol.appendChild(li)
                    // 按钮放进数组
                btns.push(li)
                li.onclick = function() {
                    if (!isMove) {
                        // 开始移动了
                        isMove = true;
                        lastIndex = index;
                        index = i;
                        // 按钮样式切换
                        btns[lastIndex].classList.remove('ac')
                        btns[index].classList.add('ac')
                            // 让ul移动到当前index的位置
                        move(index);
                    }

                }
            }

            // 向后切换
            goNext.onclick = function() {
                if (!isMove) {
                    isMove = true
                    lastIndex = index;
                    index++;
                    if (index === len) {
                        // index的值只能立马回到0（index的范围一定是0到len-1）
                        index = 0
                            // 往追加那张图移动（追加那张图的下标就是len），移动结束之后瞬间回到第0张
                        move(len, function() {
                            // ul回到第0张
                            ul.style.left = '0px'
                        })
                    } else {
                        // 普通情况下就直接让ul移动到当前index的位置
                        move(index)
                    }
                    // 不论if还是else按钮都按照正常的index切换样式
                    btns[lastIndex].classList.remove('ac')
                    btns[index].classList.add('ac')
                }
            }

            // 向前切换
            goPrev.onclick = function() {
                if (!isMove) {
                    isMove = true
                    lastIndex = index;
                    index--;
                    if (index < 0) {
                        // 瞬间拉到追加那一张，再移动
                        index = len - 1
                        ul.style.left = -len * width + 'px'
                    }
                    // 按钮样式切换
                    btns[lastIndex].classList.remove('ac')
                    btns[index].classList.add('ac')
                        // 让ul移动到当前index的位置
                    move(index);
                }
            }

            function auto() {
                timer = setInterval(() => {
                    goNext.onclick();
                }, 3000)
            }
            auto()
            div.onmouseenter = function() {
                clearInterval(timer)
            }

            div.onmouseleave = auto;


            function move(num, fn) {
                clearInterval(ul.timer)
                    // 起点值就是当前ul相对offsetParent的偏移
                var start = ul.offsetLeft;
                // num是当前运动的下标
                var end = -num * width;
                ul.timer = setInterval(() => {
                    var distance = end - start;
                    var speed = distance > 0 ? Math.ceil(distance / 10) : Math.floor(distance / 10)
                    start += speed
                    ul.style.left = start + 'px'
                    if (start === end) {
                        clearInterval(ul.timer)
                            // 每一次move结束都应该回到静止状态
                        isMove = false
                        fn && fn()
                    }
                }, 30)
            }


        }
    </script>

</head>

<body>
    <div id="div1">
        <ul>
            <li><img src="images/1.jpg" /></li>
            <li><img src="images/2.jpg" /></li>
            <li><img src="images/3.jpg" /></li>
            <li><img src="images/4.jpg" /></li>
            <li><img src="images/5.jpg" /></li>
        </ul>
        <ol>

        </ol>
        <a href="javascript:;" id="goPrev">&laquo;</a>
        <a href="javascript:;" id="goNext">&raquo;</a>
    </div>

</body>

</html>